原生 js 相关
DOM 选择器
- document.getElementById(“#id”); //id选择器
- document.getElementsByTagName(“TagName”); //返回一个包含所有这个标签名的一个伪数组
- document.getElementsByName(“name”); //返回一个特定name值的伪数组
- document.getElementsByClassName(‘name’)
- document.querySelector()
- document.querySelectorAll()
- element.parentNode; //获取父级节点
- element.parentElement; //获取父级元素
- element.childNodes; //元素中所有子级节点
- element.children; //元素中所有子级元素
兼容问题element.firstChild; //元素中第一个子级节点
1234567891011function getFirstElement(element){if(element.firstElementChild){return element.firstElementChild;}else{var node = element.firstChild;while(node && node.nodeType != 1){node = node.nextSibling;}return node;}}兼容问题element.firstElementChild; //元素中所有子级元素
兼容问题element.lastChild; //元素中最有一个子级节点
兼容问题element.lastEleemntChild; //元素中最后一个子级元素
兼容问题element.previousSibling; //元素的前一个兄弟节点
兼容问题element.previousEleemntSibling; //元素的前一个兄弟元素
兼容问题element.nextSibling; //元素的后一个兄弟节点
兼容问题element.nextElementSibling; //元素的后一个兄弟元素
兼容问题element.lastEleemntChild; //获取某个元素中最后一个子元素
DOM 方法/属性
- document.createElement(“name”); //在页面创建一个标签
- parent.appendChild(“ChildEle”); //将元素添加到父级元素中
- element.getAttribute(“attributename”); //返回该属性的值
- element.setAttribute(“attributename”,attributevalue); //设置自定义属性名和值
- element.removeAttribute(“attributename”); //移除特定属性名的属性
- element.属性名(“attributevalue”); //设置属性的值
- element.nodeType; //检测元素是什么，如果是标签–>(1),如果是属性–>(2),如果是文本–>(3)
- element.nodeName; //检测元素，如果是标签–>(标签的名字,大写的),如果是属性–>(属性的名字,小写的),如果是文本–>(#text)
- element.nodeValue; //检测元素，标签–>null,属性–>属性的值,文本–>文本内容
- element.innerText=’’; //修改元素的文本内容
- var 克隆体名字 = element.cloneNode(true); // 克隆某个元素包括其内的所有成员生成一个新的元素
创建元素的三种方式：
- document.write();
- element.innerHTML=’’; //拼接字符串创建元素
- document.createElement(‘name’);//创建元素
element.style.属性名=’属性值’;//注意属性名要用驼峰命名法
- element.offsetWidth; //获取元素的宽(数字类型)有边框
- element.offsetHeight; //获取元素的高(数字类型)有边框
- element.offsetLeft; //获取元素距离左边位置的距离
element.offsetTop ; //获取元素距离上边位置的距离
123如果父级元素脱离文档流,子级元素此时的offsetLeft获取的是相对父级元素的值如果父级元素没有脱离文档流,此时的子级元素的offsetLeft获取的是父级元素的margin+父级元素padding+父级元素的border+子级元素自己的margin如果元素自己脱离文档流,此时的offsetLeft:自己的left+自己的marginscrollWidth; //元素内容实际的宽,没有边框,如果没有内容,是元素的宽
- scrollHeight; //元素内容实际的高,没有边框,如果没有内容,是元素的高
- scrollLeft; //向左卷曲出去的距离（兼容问题）
scrollTop; //向上卷曲出去的距离（兼容问题） - clientWidth; //可视区域的宽
- clientHeight; //可视区域的高
- 兼容问题 pageX:页面的横坐标,谷歌和火狐支持,IE8不支持–相当于:clientX+scrollLeft
- 兼容问题 pageY:页面的纵坐标,谷歌和火狐支持,IE8不支持–相当于:clientY+scrollTop
原生 js 事件相关
事件
- element.onload=function(){}; //页面加载事件
- element.onchange=function(){}; //改变事件
- element.onmouseover=function(){}; //鼠标进入事件
- element.onmouseout=function(){}; //鼠标离开事件
- element.onclick=function(){}; //鼠标点击事件
- element.onfocus=function(){}; //获取焦点事件
- element.onblur=function(){}; //失去焦点事件
- element.onmousedown=function(){}; //鼠标按下事件
- element.onmouseup=function(){}; //鼠标抬起事件
- document.onmousemove=function (e) { 兼容问题
//e.clientX 和e.clientY是获取次数鼠标针对页面左上角的可视区域的横做坐标
my$(“im”).style.left=e.clientX+”px”;
my$(“im”).style.top=e.clientY+”px”;
}; - my$(“dv”).onscroll=function () {}; //滚动事件
绑定(解绑)事件方法
- element.addEventListener(“事件名”,fn,false); //addEventListener—谷歌支持,火狐支持,IE11支持,IE8不支持,函数内部this–当前触发该事件的对象
- element.revemoEventListener(“事件名”,fn,false); addEventListener对应事件解绑方法
- my$(“btn”).attachEvent(“on事件名”,fn); //attachEvent():谷歌不支持,火狐也不支持,IE8支持的,….IE11不支持，函数内部this—window
- element.attachEvent(“on事件名”,fn); //attachEvent解绑事件的方法
jQuery
注意:要想链式 编程,必须是对象调用什么内容之后返回的还是当前的这个对象
链式编程可能会遇到断链的问题,使用.end()修复断链(恢复到断链之前的状态)
jQuery 事件
- 页面加载事件: $(function(){});
jQuery 绑定事件方法
- $(element).click(function(){});
- bind方法:对应的解绑的方法:unbind方法
- delegate方法:对应的解绑的方法:undelegate方法
- on方法：对应的解绑的方法:off方法 推荐使用on方法，因为bind和delegate方法内部都是使用on方法绑定事件1234$("#dv").on("click","p",function () {console.log("p被点击了");});$("#dv").off("click");
jQuery 操作样式
- $(element).css(“propertyname”:”value”,”propertyname”:”value”);//设置多项属性
- $(element).css(“propertyname”,”value”).css(“propertyname”,”value”);//链式编程
- 对象.css({propertyname:value});
jQuery 选择器
- $(“#id”); //id选择器
- $(“tagname”); //标签选择器
- $(“.classname”); //类选择器
- $(“tagname.classname”); //多条件选择器(多标签条件)
- 层级选择器
- $(“parent child”); //父元素 里面所有的 子元素 元素
- $(“parent>child”); //里面直接的 子元素
- $(“parent+child”); //当前元素后面的第一个 兄弟元素
- $(“parent~child”); //当前元素后面所有的 兄弟元素
- $(“eles:odd”); //奇数选择器
- $(“eles:even”); //偶数选择器
- 索引选择器：
- :eq(index); //等于这个索引的元素
- :gt(index); //大于这个索引的所有元素
- :lt(index); //小于这个索引的所有元素
jQuery 操作元素
- .val(); //方法,有参数就是设置元素的value属性值,没有参数就是获取
- .html(); //方法,同上,设置或者获取元素中的html标签及内容
- .text(); //方法,同上.,设置或者获取元素中文本内容
- 添加类名
- .addClass(“classvalue”); //给class设值–>添加类名
- .addClass(“classname”).addClass(“类样式的名字”);
- .addClass(“classname classname”);
- .removeClass(“classname”);//移除类名
- .toggleClass(“classname”);//切换类样式
- 创建标签：
- $(“name”); //创建标签返回的是对象
- $(“selector”).html(“content”);//html()方法相当于DOM中的innerHTML
- 将标签添加到页面指定元素内：
- .append(); //方法:父级元素.append(子级元素);注意:有可能发生剪切的效果
- .appendTo(); //方法:子级元素.appendTo(父级元素);
- .html(“”); //清空当前元素中的内容
- .empty(); //清空当前元素中的内容
- .remove(); //移除当前元素
- .index(); //获取的是元素的索引
- .find(); //查找某个元素
- .siblings(); //获取的是当前元素的其他的所有的兄弟元素(不包括自己)
- .next(); //获取的是当前元素的下一个兄弟元素
- .nextAll(); //获取的是当前元素后面的所有的兄弟元素
- .prev(); //获取的是当前元素的上一个兄弟元素
- .prevAll(); //获取的是当前元素的前面的所有的兄弟元素
- .attr(“attrname”,”attrvalue”); //设置某个元素的自定义属性及值
- .attr(“attrname”); //获取该元素的这个自定义属性的值
- .removeAttr(“attrname”); //移除该属性和值
- .prop(“attrname”,attrvalue); //可以设置元素的选中的属性及值
- .prop(“attrname”); //获取该属性的值
注意:一般非选中的属性使用attr方法，否则建议使用.prop方法 - .width(); //设置元素的宽
- .height(); //设置元素的高
- 设置和获取元素left和top推荐使用.offset()方法：
- .offset({“left”:value,”top”:value}); //设置
- 设置和获取元素的卷曲出去的距离left和top：
- .scrollLeft()方法或者是.scrollTop()方法
- $elements.each(function(i,item){tudo}); //遍历数组做事情
jQuery animate动画函数和其他动画效果
- .animate({style},speed,easing,callback);
- style 必需 设置样式，多选，键值对方式
- speed 可选 设置执行动画总时长(可设置毫秒，也可设置slow、normal、fast)
- easing 可选 在不同的动画点中设置动画速度的 easing 函数。(linear、swing)
- callback 可选 animate 函数执行完之后，要执行的函数。
- show(); //显示
- hide(); //隐藏
- slideUp(); //滑上
- slideDown(); //滑下
- slideToggle();//切换滑入和滑出
- fadeIn(); //淡入
- fadeOut(); //淡出
- fadeToggle(); //淡入淡出
- fadeTo(); //设置在多长的时间把透明度降低或者设置为多少
html5
html5 新增选择器
- document.getElementsByClassName(‘ClassName’); //类名选择器
- document.querySelector(‘selector’); //通过CSS选择器获取元素，符合匹配条件的第1个元素。
- document.querySelectorAll(‘selector’); //通过CSS选择器获取元素，以伪数组形式存在
- Node.classList.add(‘ClassName’); //移除类样式
- Node.classList.remove(‘ClassName’); //移除类样式
- Node.classList.toggle(‘ClassName’); //切换类样式，有则移除，无则添加
- Node.classList.contains(‘ClassName’); //检测是否存在类样式
- 自定义属性操作：12345678910<p data-name-dec="小三" data-sex="男">这是p</p>p.dataset--->{name:"小三",sex:"男"}获取：对象.dataset.name--->该属性的值对象.dataset["name"]--->该属性的值设置:对象.dataset["name"]="新的值";对象.dataset.name="新的值";注意:获取和设置的时候属性名字遵循驼峰命名法,最终在标签中才能形成如下形式:data-名字-名字-名字="值";
css
css 属性选择器
- E[att] CSS2选择具有att属性的E元素
- E[att=”val”] CSS2选择具有att属性且属性值等于val的E元素
- E[att~=”val”] CSS2选择具有att属性且属性值中如果有多个值，其中空格隔开的属性为val的E元素；例如(att=“val a b”)
- E[att^=”val”] CSS3具有att属性且属性值开头为val的字符串的E元素
- E[att$=”val”] CSS3具有att属性且属性值为val结尾的字符串的E元素
- E[att*=”val”] CSS3具有att属性且属性值为包含val的字符串的E元素
- E[att|=”val”] CSS2具有att属性且属性值为以val开头并用连接符“-”分隔的字符串E元素，如果属性值仅为val也将被选择；
伪类选择器
- li:first-child{color:red} 第一个：找到li父元素中的第一个li
- li:last-child{color:red} 最后一个：找到li父元素中最后一个li
- li:empty{to do} 空选择器：如果li里面没有内容，则设置的样式才会生效
- li:target{to do} 目标选择器：当跳转到当前目标时，样式才会生效
- li:not(.two){to do} 排除选择器：排除类名为.two的li，剩下的li应用样式
li:before, 在li里面元素的前面设置伪类
li:after{ 在li里面元素的后面设置伪类
content:””; display:block;
}
结构选择器
- li:nth-child(n){color:red} 第几个：找到li父元素中第n个li
- li:nth-child(even){color:orange} 偶数：找到li父元素中所有的偶数li
- li:nth-child(odd){color:red} 奇数：找到li父元素中所有的奇数li
- li:nth-child(7n){color:red} 最后一列：每行总元素数乘以N就是找到li父元素中最后一列li
- li:nth-child(7n-1){color:red} 倒数第二列：大致如上；
- li:nth-child(-n+3){color:red} 前三个：li父元素中前三个li
- li:nth-last-child(-n+3){color:red} 后三个：li父元素中后三个li
伪元素选择器
- li:first-letter{color:red} 找到每个li内第一个字符
- li:first-line{color:red} 找到每个li中第一行的字符
- li::selection{color:red} 找到被选中的li的内容
li::before,
li::after{
content:””; display:block;
}